import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { WhiteSpace , WingBlank , Qrcode , Tools ,Button} from 'weaver-mobile';
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@withRouter
@observer
class MemberView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        qrCode : '',
        qrcodeRefreshTime : 10,
      };
    }
    componentDidMount() {
      const { meetingId , getQrCode } = this.props.viewMeetingStore
      getQrCode({meetingid:meetingId}).then((result)=>{
        this.setState({qrCode:result.QrCode,qrcodeRefreshTime:result.qrcodeRefreshTime})
        if(result.dynamic){
          this.startSetInterval();
        }
      })
    }
    componentWillUnmount() {
      //组件卸载时一般清理一些状态
      //清除定时器，不知道是否生效
      clearInterval(this.interval);
    }

    startSetInterval = () => {
      const { meetingId , getQrCode } = this.props.viewMeetingStore
      //设置定时器
      this.interval = setInterval(() => {
        getQrCode({meetingid:meetingId}).then((result)=>{
          this.setState({qrCode:result.QrCode})
        })
      },this.state.qrcodeRefreshTime * 1000)
    }
    pieCallBack = (key)=>{
      const { history } = this.props;
      const { setState  } = this.props.viewMeetingStore;
      if(key === 0){
        history.push("/calendar/detail/sign/signData/allMember");
        setState({signPage:0});
        sessionStorage.setItem('meetingSignNowTab',0)
      } else if(key === 1){
        history.push("/calendar/detail/sign/signData/sign");
        setState({signPage:1});
        sessionStorage.setItem('meetingSignNowTab',1)
      } else if(key === 3){
        history.push("/calendar/detail/sign/signData/unSign");
        setState({signPage:2});
        sessionStorage.setItem('meetingSignNowTab',2)
      } else if(key === 'qrcode'){
        history.push("/calendar/detail/sign/meetingQrcode");
      } else if(key === 'meetingQrcodeSignSet'){
        history.push("/calendar/detail/sign/meetingQrcodeSignSet");
      } 
    }
    
    render() {
      const { meetingName } = this.props.viewMeetingStore;
      let meetingNameTemp = meetingName===''?sessionStorage.meetingName:meetingName
      const DisplayValueSpan = v => (
        <div
          dangerouslySetInnerHTML={{ __html: v }}
        />
      );
      return (
        <div style={{textAlign:'center','height':'100%'}}>
          <WhiteSpace size="lg" />
          <WingBlank size="lg" >{DisplayValueSpan(meetingNameTemp)}</WingBlank>
          <WhiteSpace size="lg" />
          <Qrcode size={180} level={"L"} text={`${this.state.qrCode}`}/>
          <WhiteSpace size="lg" />
          <WingBlank size="lg">{getLabel('510280','扫一扫上面的二维码，进行会议签到或签退')}</WingBlank>
          <WhiteSpace size="lg" />
          <Button type="primary" style={{'width':'100%','position':'absolute','bottom':'0px'}} onClick={()=>this.pieCallBack('meetingQrcodeSignSet')}>{getLabel('520821','会议签到/签退设置')}</Button>
          
        </div>
      )
    }
}

export default MemberView;